<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑 - 小说转有声书APP</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        .character-card {
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            transition: all 0.2s;
        }
        
        .character-card:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow);
        }
        
        .character-card.active {
            border-color: var(--primary-color);
            background-color: rgba(99, 102, 241, 0.05);
        }
        
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--primary-color);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: 500;
            font-size: 20px;
        }
        
        .voice-sample {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem;
            border-radius: 0.25rem;
            background-color: var(--bg-secondary);
            cursor: pointer;
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin: 0.5rem 0;
        }
        
        .slider {
            flex-grow: 1;
            height: 4px;
            background-color: var(--border-color);
            border-radius: 2px;
            position: relative;
        }
        
        .slider-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: var(--primary-color);
            position: absolute;
            top: 50%;
            left: 60%; /* 演示用，实际应根据值动态设置 */
            transform: translate(-50%, -50%);
            cursor: pointer;
        }
        
        .preview-section {
            background-color: var(--bg-secondary);
            border-radius: 0.5rem;
            padding: 1rem;
            margin-top: 1rem;
        }
        
        .dialog-bubble {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 0.5rem;
            position: relative;
        }
        
        .dialog-bubble::before {
            content: '';
            position: absolute;
            top: 10px;
            left: -10px;
            border-width: 10px 10px 0 0;
            border-style: solid;
            border-color: transparent white transparent transparent;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="navbar">
        <div class="flex items-center gap-2">
            <a href="library.html" class="icon">arrow_back</a>
            <h1>编辑有声书</h1>
        </div>
        <div class="flex items-center gap-2">
            <button class="btn btn-primary">保存</button>
        </div>
    </header>
    
    <div class="container" style="margin-bottom: 60px;">
        <!-- 小说信息 -->
        <div class="card">
            <div class="flex gap-4">
                <img src="https://via.placeholder.com/100x150?text=封面" alt="书籍封面" class="rounded">
                <div>
                    <h2>三体</h2>
                    <p>刘慈欣 | 科幻小说 | 共298章</p>
                    <div class="badge my-2">已识别角色: 18</div>
                </div>
            </div>
        </div>
        
        <!-- 编辑tabs -->
        <div class="tab-container mt-4">
            <div class="tab active">角色配音</div>
            <div class="tab">章节管理</div>
            <div class="tab">背景音效</div>
            <div class="tab">高级设置</div>
        </div>
        
        <!-- 角色配音编辑 -->
        <div class="flex" style="gap: 2rem; margin-top: 1rem;">
            <!-- 角色列表 -->
            <div style="flex: 1;">
                <h3>角色列表</h3>
                <p>点击角色进行声音配置</p>
                
                <div class="character-card active mt-4">
                    <div class="flex gap-4">
                        <div class="avatar">叶</div>
                        <div>
                            <h4>叶文洁</h4>
                            <p>主要角色 | 178段对话</p>
                        </div>
                    </div>
                </div>
                
                <div class="character-card">
                    <div class="flex gap-4">
                        <div class="avatar">汪</div>
                        <div>
                            <h4>汪淼</h4>
                            <p>主要角色 | 152段对话</p>
                        </div>
                    </div>
                </div>
                
                <div class="character-card">
                    <div class="flex gap-4">
                        <div class="avatar">史</div>
                        <div>
                            <h4>史强</h4>
                            <p>主要角色 | 95段对话</p>
                        </div>
                    </div>
                </div>
                
                <div class="character-card">
                    <div class="flex gap-4">
                        <div class="avatar">旁</div>
                        <div>
                            <h4>旁白</h4>
                            <p>系统角色 | 486段文本</p>
                        </div>
                    </div>
                </div>
                
                <div class="character-card">
                    <div class="flex gap-4">
                        <div class="avatar">杨</div>
                        <div>
                            <h4>杨冬</h4>
                            <p>次要角色 | 45段对话</p>
                        </div>
                    </div>
                </div>
                
                <!-- 更多角色... -->
                <button class="btn btn-secondary mt-4 w-full">
                    <span class="icon">add</span>
                    添加新角色
                </button>
            </div>
            
            <!-- 声音配置 -->
            <div style="flex: 2;">
                <h3>叶文洁 - 声音配置</h3>
                
                <!-- 声音模板选择 -->
                <div class="card mt-4">
                    <h4>选择声音模板</h4>
                    
                    <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));">
                        <div class="voice-sample mt-2">
                            <span class="icon">radio_button_checked</span>
                            <div>
                                <p>成熟女声1</p>
                                <span class="text-secondary">默认</span>
                            </div>
                            <span class="icon">play_circle</span>
                        </div>
                        
                        <div class="voice-sample mt-2">
                            <span class="icon">radio_button_unchecked</span>
                            <div>
                                <p>成熟女声2</p>
                                <span class="text-secondary">温柔</span>
                            </div>
                            <span class="icon">play_circle</span>
                        </div>
                        
                        <div class="voice-sample mt-2">
                            <span class="icon">radio_button_unchecked</span>
                            <div>
                                <p>青年女声</p>
                                <span class="text-secondary">活力</span>
                            </div>
                            <span class="icon">play_circle</span>
                        </div>
                        
                        <div class="voice-sample mt-2">
                            <span class="icon">radio_button_unchecked</span>
                            <div>
                                <p>老年女声</p>
                                <span class="text-secondary">沧桑</span>
                            </div>
                            <span class="icon">play_circle</span>
                        </div>
                    </div>
                </div>
                
                <!-- 声音参数调整 -->
                <div class="card mt-4">
                    <h4>声音参数调整</h4>
                    
                    <div class="mt-4">
                        <div>
                            <label>音调</label>
                            <div class="slider-container">
                                <span>低</span>
                                <div class="slider">
                                    <div class="slider-thumb"></div>
                                </div>
                                <span>高</span>
                            </div>
                        </div>
                        
                        <div class="mt-2">
                            <label>语速</label>
                            <div class="slider-container">
                                <span>慢</span>
                                <div class="slider">
                                    <div class="slider-thumb" style="left: 40%;"></div>
                                </div>
                                <span>快</span>
                            </div>
                        </div>
                        
                        <div class="mt-2">
                            <label>情感强度</label>
                            <div class="slider-container">
                                <span>弱</span>
                                <div class="slider">
                                    <div class="slider-thumb" style="left: 70%;"></div>
                                </div>
                                <span>强</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 预览部分 -->
                <div class="preview-section">
                    <div class="flex justify-between items-center">
                        <h4>预览效果</h4>
                        <button class="btn btn-primary">
                            <span class="icon">play_arrow</span>
                            播放预览
                        </button>
                    </div>
                    
                    <div class="mt-4">
                        <div class="dialog-bubble">
                            <p>我必须要告诉你们这个残酷的真相：这个宇宙并不存在道德，也没有什么所谓的善恶之分。</p>
                        </div>
                        
                        <div class="dialog-bubble">
                            <p>在三体世界中，弱肉强食是唯一的法则。</p>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="flex gap-2 mt-4">
                    <button class="btn btn-secondary">
                        <span class="icon">refresh</span>
                        重置为默认
                    </button>
                    <button class="btn btn-primary">
                        <span class="icon">save</span>
                        保存配置
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <nav class="bottom-nav">
        <a href="home.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">home</span>
            <span>首页</span>
        </a>
        <a href="library.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">library_books</span>
            <span>书库</span>
        </a>
        <a href="import.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">add_circle</span>
            <span>导入</span>
        </a>
        <a href="player.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">headphones</span>
            <span>播放</span>
        </a>
        <a href="settings.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">settings</span>
            <span>设置</span>
        </a>
    </nav>
</body>
</html> 